iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 13
0
自我挑戰組

邁向 JavaScript 核心之路 系列 第 13

[Day 13] JavaScript 物件導向- This 與 內建物件

  • 分享至 

  • xImage
  •  

相信各位讀者對於 This 並不陌生,甚至可以說使用的頻率非常之高,但各位真的明白 This 在不同的位置指的是誰嗎?為了避免一個 This,各自表述 的情境發生,如果概念還很模糊的同學,就讓我們看下去吧!

下面我們會用一些範例程式碼來做說明


    var ary = [1, 2, 3];
    ary.a = 12;
    ary.show = function() {
        console.log(this.a); // 12
    };
    ary.show();
    

上面的範例,this 會指向到當前 function( 方法 ), 屬於 ary 的物件。


    document.onclick = function() {
        console.log( this ); // #document
    };
    

而這邊的 this 會指向當前 function( 方法 ),屬於 document 的物件。

    
    function show() {
        console.log( this ); // Window
    }
    show();
    

這裡的 this 會指向 全域 (window);
上面的範例也等同於下面的寫法

    
    window.show = function() {
        console.log( this ); // Window
    };
    window.show();
    

看了上述三個範例,大家對於 This 是不是有個基礎的瞭解了呢?

這邊我用一句話來做個總結,影響 This 的是它在哪裡被呼叫,而非在哪裡被宣告

接下來,我列舉一些 JavaScript 常用的內建物件

  • Object 物件
  • Function 函式
  • Array 陣列
  • String 字串
  • Boolean 布林值
  • Number 數字( 含浮點數 )
  • Date 日期物件
  • RegExp 正規表示式物件
  • Error 錯誤物件

不建議在內建的物件上隨意地增加屬性或方法,否則可能會覆蓋到內建的屬性與方法。


週六下雨下個不停,感覺好悶啊。

參考資料:

Tommy - 深入 JavaScript 核心課程
卡斯柏 - JavaScript 的 this 到底是誰?


上一篇
[Day 12] JavaScript 物件導向- 基本介紹
下一篇
[Day 14] JavaScript 物件導向- 建立物件
系列文
邁向 JavaScript 核心之路 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言